*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    min-height:100vh;

    font-family:'Poppins',sans-serif;

    overflow-x:hidden;

    position:relative;

    background:#050200;

    color:#f2d07d;
}

/* =========================================================
   BACKGROUND
========================================================= */

body::before{

    content:'';

    position:fixed;
    inset:0;

    background:
    linear-gradient(
        rgba(0,0,0,.82),
        rgba(0,0,0,.9)
    ),

    url('backdrop.png');

    background-size:cover;
    background-position:center;

    z-index:-3;
}

.bg-overlay{

    position:fixed;
    inset:0;

    background:
    radial-gradient(circle at top left,
    rgba(255,180,0,.08),
    transparent 30%),

    radial-gradient(circle at bottom right,
    rgba(255,180,0,.08),
    transparent 30%);

    z-index:-2;
}

/* =========================================================
   PARTICLES
========================================================= */

.particles span{

    position:absolute;

    width:6px;
    height:6px;

    border-radius:50%;

    background:#ffcc66;

    animation:float 14s linear infinite;

    opacity:.5;
}

.particles span:nth-child(1){
    left:10%;
    animation-delay:0s;
}

.particles span:nth-child(2){
    left:25%;
    animation-delay:3s;
}

.particles span:nth-child(3){
    left:45%;
    animation-delay:6s;
}

.particles span:nth-child(4){
    left:65%;
    animation-delay:2s;
}

.particles span:nth-child(5){
    left:80%;
    animation-delay:8s;
}

.particles span:nth-child(6){
    left:92%;
    animation-delay:4s;
}

@keyframes float{

    from{
        transform:translateY(100vh) scale(0);
    }

    to{
        transform:translateY(-100vh) scale(1);
    }
}

/* =========================================================
   MAIN LAYOUT
========================================================= */

.findus-section{

    width:100%;
    min-height:100vh;

    display:flex;

    align-items:center;

    padding:60px 5vw;

    gap:60px;
}

/* =========================================================
   LEFT PANEL
========================================================= */

.left-panel{

    width:55%;

    display:flex;

    flex-direction:column;

    justify-content:center;
}

/* =========================================================
   LOGO
========================================================= */

.logo-box{

    width:420px;

    margin-bottom:40px;

    animation:logoFloat 4s ease-in-out infinite;
}

.logo{

    width:100%;

    object-fit:contain;

    filter:
    drop-shadow(0 0 22px rgba(255,190,0,.45))
    drop-shadow(0 0 50px rgba(255,170,0,.25));

    transition:1s;
}

.logo:hover{

    transform:scale(1.03);

    filter:
    drop-shadow(0 0 35px rgba(255,220,120,.65))
    drop-shadow(0 0 80px rgba(255,170,0,.35));
}

/* =========================================================
   HEADING
========================================================= */

.heading-box h1{

    font-size:78px;

    font-weight:600;

    color:#f7d28c;

    margin-bottom:10px;
}

.gold-line{

    width:180px;
    height:3px;

    margin:18px 0 28px;

    background:
    linear-gradient(
        to right,
        #ffae00,
        #fff1bc,
        transparent
    );
}

.heading-box p{

    max-width:700px;

    font-size:20px;

    line-height:1.9;

    color:#d8b476;
}

/* =========================================================
   CONTACT GRID
========================================================= */

.contact-grid{

    margin-top:50px;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;
}

.contact-card{

    position:relative;

    display:flex;

    align-items:center;

    gap:22px;

    padding:28px;

    text-decoration:none;

    border:1px solid rgba(255,190,0,.2);

    background:
    rgba(20,10,0,.45);

    backdrop-filter:blur(10px);

    overflow:hidden;

    transition:.5s ease;

    cursor:pointer;
}

.contact-card:hover{

    transform:
    translateY(-8px)
    scale(1.02);

    box-shadow:
    0 0 35px rgba(255,180,0,.18);
}

.contact-card::before{

    content:'';

    position:absolute;

    top:-100%;
    left:-40%;

    width:40%;
    height:300%;

    background:
    rgba(255,255,255,.06);

    transform:rotate(25deg);

    transition:1s;
}

.contact-card:hover::before{
    left:140%;
}

.icon{

    width:72px;
    height:72px;

    min-width:72px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:28px;

    background:
    linear-gradient(
        135deg,
        #ffcb66,
        #8b5a00
    );

    color:#1a0c00;
}

.info h3{

    font-size:24px;

    margin-bottom:6px;

    color:#ffe3a4;
}

.info p{

    color:#d8b476;

    font-size:16px;
}

/* =========================================================
   LOCATION
========================================================= */

.location-box{

    margin-top:40px;

    display:flex;

    align-items:center;

    gap:22px;

    padding:28px;

    border:1px solid rgba(255,190,0,.2);

    background:
    rgba(20,10,0,.45);

    backdrop-filter:blur(10px);
}

.location-icon{

    width:90px;
    height:90px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:34px;

    background:
    linear-gradient(
        135deg,
        #ffcb66,
        #8b5a00
    );

    color:#1a0c00;
}

.location-text h2{

    font-size:30px;

    margin-bottom:10px;

    color:#ffe3a4;
}

.location-text p{

    font-size:18px;

    line-height:1.7;

    color:#d8b476;
}

/* =========================================================
   MAP
========================================================= */

.map-box{

    width:100%;

    margin-top:30px;

    border:1px solid rgba(255,190,0,.25);

    overflow:hidden;

    background:
    rgba(20,10,0,.45);

    backdrop-filter:blur(10px);

    box-shadow:
    0 0 30px rgba(255,180,0,.12);
}

.map-box iframe{

    width:100%;
    height:320px;

    border:none;

    filter:
    grayscale(1)
    contrast(1.1)
    brightness(.9);
}

/* =========================================================
   RIGHT PANEL
========================================================= */

.right-panel{

    width:45%;

    position:relative;

    display:flex;

    align-items:center;
    justify-content:center;
}

.visual-card{

    width:420px;
    height:420px;

    border-radius:50%;

    position:relative;

    background:
    rgba(15,8,0,.55);

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,190,0,.2);

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    box-shadow:
    0 0 60px rgba(255,180,0,.15);
}

.card-glow{

    position:absolute;
    inset:0;

    background:
    radial-gradient(circle,
    rgba(255,190,0,.15),
    transparent 70%);
}

.card-content{

    position:relative;

    text-align:center;

    width:80%;
}

.card-content h2{

    font-size:42px;

    margin-bottom:20px;

    color:#ffe4a4;
}

.card-content p{

    font-size:18px;

    line-height:2;

    color:#d8b476;
}

/* =========================================================
   FLOATING RINGS
========================================================= */

.floating-ring{

    position:absolute;

    border-radius:50%;

    border:1px solid rgba(255,190,0,.18);

    animation:rotate 12s linear infinite;
}

.ring1{

    width:520px;
    height:520px;
}

.ring2{

    width:620px;
    height:620px;

    animation-direction:reverse;
}

@keyframes rotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

@keyframes logoFloat{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0px);
    }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1200px){

    .findus-section{

        flex-direction:column;

        gap:80px;
    }

    .left-panel,
    .right-panel{
        width:100%;
    }

    .contact-grid{
        grid-template-columns:1fr;
    }

    .heading-box h1{
        font-size:52px;
    }

    .visual-card{

        width:320px;
        height:320px;
    }

    .ring1{
        width:400px;
        height:400px;
    }

    .ring2{
        width:480px;
        height:480px;
    }
}

@media(max-width:700px){

    .logo-box{
        width:260px;
    }

    .heading-box h1{
        font-size:42px;
    }

    .heading-box p{
        font-size:16px;
    }

    .location-text h2{
        font-size:22px;
    }

    .location-text p{
        font-size:15px;
    }

    .card-content h2{
        font-size:28px;
    }

    .card-content p{
        font-size:15px;
    }
}